⚖️ JavaScript 얕은 비교 vs 깊은 비교

===로 객체를 비교하면 내용이 같아도 다르다고 나올 수 있어, 상황에 맞는 비교 방식을 선택해야 합니다.

1️⃣ 얕은 비교 (Shallow Compare)

const a = { x: 1, y: 2 };
const b = { x: 1, y: 2 };

a === b; // false, 서로 다른 참조

function shallowEqual(objA, objB) {
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;
  return keysA.every((key) => objA[key] === objB[key]);
}

shallowEqual(a, b); // true

• 1depth의 값만 비교, 중첩된 객체/배열은 여전히 참조 비교

2️⃣ 깊은 비교 (Deep Compare)

const a = { user: { name: "재석" } };
const b = { user: { name: "재석" } };

shallowEqual(a, b); // false, user 참조가 다름 → 얕은 비교로는 구분 불가

function deepEqual(objA, objB) {
  if (objA === objB) return true;
  if (typeof objA !== "object" || typeof objB !== "object") return false;

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;

  return keysA.every((key) => deepEqual(objA[key], objB[key]));
}

deepEqual(a, b); // true

• 중첩된 모든 depth까지 재귀적으로 비교

3️⃣ React에서의 활용

• React.memo, useMemo의 기본 비교는 얕은 비교라, props/의존성 배열에 중첩 객체를 그대로 넘기면 매번 "다르다"고 판단해 최적화가 무력화될 수 있음
• 깊은 비교는 객체가 클수록 비용이 커지므로, 꼭 필요한 경우가 아니면 얕은 비교로 충분하도록 데이터 구조를 설계하는 것이 더 나은 방향

✍️ 한 줄 정리

얕은 비교는 1depth 값만, 깊은 비교는 중첩된 모든 값을 비교하며, React의 메모이제이션은 기본적으로 얕은 비교를 사용한다는 점을 염두에 둬야 한다.